<!doctype html>
<html>
<head>
    <title>Gallery Page</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        h2{
            text-align:center;
            margin-top:20px;
        }
        ul{
            padding:10px;
            overflow:hidden;
            width:820px;
            margin:20px auto;
        }
        ul li{
            list-style:none;
            float:left;
            padding:10px;
        }
        ul li:hover{
            background:#efefef;
        }
        img{
            display:block;
            border:1px solid #333300;
        }
    </style>
</head>
<body>
    <h2>Heart Draw Gallery</h2>
    <ul>
        <?php
            //echo "Gallery Page";
            $dirPath = "uploadimages";  //folder name
            $imageExt = array('jpg','png');

            if(file_exists($dirPath)){
                if(is_dir($dirPath)){
                    $dp = opendir($dirPath) or die("Cannot Open Directory");
                    while($file=readdir($dp)){
                        if($file!='.' && $file!='..'){
                            //echo "<br/>" . $file;
                            $fileData = pathinfo($file);
                            //echo "<br/>$dirPath/$file";
                            if(in_array($fileData['extension'],$imageExt)){
                                echo "<li><img class='lazy' src='assets/grey.gif' data-original='$dirPath/" . $file . "' width='250' height='320'/><p>" . round(filesize("$dirPath/$file")/1024) . "KB</p></li>";
                            }
                        }
                    }
                    closedir($dp);
                    //echo "<br/> Directory success";
                }else{
                    echo "<br/>Not a Directory";
                }
            }else{
                echo "<br/>Directory does not exists";
            }
        ?>
    </ul>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("img.lazy").lazyload();
    </script>
</body>
</html>